import React, { useState } from "react";
import ListItem from "./list_item";

const initialItems = [
	{ id: 1, text: "Item 1" },
	{ id: 2, text: "Item 2" },
	{ id: 3, text: "Item 3" }
	// Add more items as needed
];

const App: React.FC = () => {
	const [items, setItems] = useState(initialItems);

	const handleDrop = (draggedIndex: number, targetIndex: number) => {
		const newItems = [...items];
		const draggedItem = newItems[draggedIndex];
		newItems.splice(draggedIndex, 1);
		newItems.splice(targetIndex, 0, draggedItem);
		setItems(newItems);
	};

	return (
		<div>
			<h1>Draggable List</h1>
			{items.map((item, index) => (
				<ListItem key={item.id} id={item.id} text={item.text} index={index} handleDrop={handleDrop} />
			))}
		</div>
	);
};

export default App;
